<template>
  <!-- 圈子收益页面(暂时未用，跳APP) -->
  <view class="main">
    <view class="xian_"></view>
    <picker @change="bindPickerChange" value="" :range="quanNameList">
      <view class="top_">
        <view class="left_">
          {{ quanName }}
        </view>
        <view class="right_">
          <image src="../../imges/shuaixuan.png" mode="aspectFill"></image>
        </view>
      </view>
    </picker>
    <view class="xian_"></view>

    <!-- 空状态显示 -->
    <view class="wu_Huo" v-if="friendsList.length == 0">
      <image src="../../imges/wujinqian.png" mode="aspectFill"></image>
      <text>暂无收益</text>
    </view>

    <view class="list_" v-for="(item, index) in friendsList" :key="index">
      <view class="item_">
        <navigator
          :url="'/pages/index/personal?id=' + item.createUid"
          class="left_"
        >
          <image :src="item.avatarUrl" mode="aspectFill"></image>
        </navigator>
        <view class="right_">
          <view class="one">
            {{ item.realName }}
          </view>
          <view class="two">
            {{ item.company }}
          </view>
          <view class="three">
            收益：<text>{{ item.actualAccount }}</text>
          </view>
          <view class="four">
            （付款：{{ item.payAccount }} 提成：{{ item.account }})
          </view>
          <view class="five"> 付费时间：{{ item.createTime }} </view>
          <view class="six" v-if="item.settlementStatus == 1">
            结算时间：{{ item.settlementTime }}
          </view>
          <view class="six" v-if="item.settlementStatus == 0">
            预计结算时间：{{ item.dueShowDate }}
          </view>
        </view>
      </view>
      <view class="quan_">
        <view class="item">
          <view class="left">
            <image :src="item.orgUrl" mode="aspectFill"></image>
            <text>{{ item.orgName }}</text>
          </view>
          <navigator
            :url="'/pages/index/detail?id=' + item.orgId + '&isZ=1'"
            class="right"
            hover-class="none"
          >
            查看圈子
          </navigator>
        </view>
      </view>
      <view class="xian_ xian1"></view>
    </view>
    <view class="bottom_tn"> </view>
    <view class="footer_b">
      <view class="left_"> 统计： </view>
      <view class="right_">
        <view class="top">
          {{ settled }}
        </view>
        <view class="bottom"> 合计(元) </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      pageSize: 10,
      friendsList: [],
      settled: "", //总收益
      bottom: false,
      noMore: false,
      quanList: [],
      quanNameList: [],
      quanName: "全部收益",
      quanId: "", //圈子id
    };
  },
  onLoad() {
    this.handleList(); //收益列表
    this.handleQuanList(); //圈子列表
  },
  onReachBottom() {
    uni.showLoading({
      title: "加载中",
    });
    this.bottom = true;
    this.pageSize = this.pageSize + 10;
    this.handleList();
  },
  onPullDownRefresh() {
    this.bottom = false;
    this.onMore = false;
    this.pageSize = 10;
    setTimeout(() => {
      this.handleList();
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1500,
        icon: "none",
      });
    }, 1000);
  },
  methods: {
    bindPickerChange(e) {
      //选择哪个
      this.quanName = this.quanNameList[e.detail.value];
      this.quanId = this.quanList[e.detail.value].id;
      this.handleList();
    },
    handleQuanList() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/myHome/myFriends",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          // console.log(res, 'wod1')
          if (res.data.code == 200) {
            this.quanList = ["", ...res.data.data];
            this.quanNameList = ["全部收益"];
            res.data.data.forEach((v) => {
              this.quanNameList.push(v.orgName);
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleList() {
      //圈子收益列表
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/myHome/income",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            friendsId: this.quanId,
            pageSize: this.pageSize,
            pageNumber: 1,
          },
        }).then((res) => {
          // console.log(res, '圈子收益')
          if (res.data.code == 200) {
            this.friendsList = res.data.data.rows;
            this.settled = res.data.data.settled;

            if (res.data.data.totalPages == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              !this.onMore &&
              this.bottom &&
              this.friendsList.length >= res.data.data.totalPages
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              this.onMore = true;
              return false;
            }

            if (
              this.bottom &&
              this.friendsList.length < res.data.data.totalPages
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            } else if (
              this.bottom &&
              this.friendsList.length >= res.data.data.totalPages
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .wu_Huo {
    padding-top: 320rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 320rpx;
      height: 260rpx;
    }

    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }

  .footer_b {
    width: 750rpx;
    height: 100rpx;
    background: #ffffff;
    box-shadow: 0px 2rpx 0px 0px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    padding: 0 32rpx;
    padding-top: 17rpx;
    border-top: 2rpx solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;

    .left_ {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
    }

    .right_ {
      .top {
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ff5700;
      }

      .bottom {
        margin-top: 6rpx;
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .bottom_tn {
    height: 170rpx;
  }

  .list_ {
    // padding-bottom: 170rpx;

    .quan_ {
      padding: 30rpx 25rpx;
      padding-top: 0;

      .item {
        width: 700rpx;
        height: 80rpx;
        background: #f8f8f8;
        border-radius: 6rpx;
        display: flex;
        justify-content: space-between;
        padding-left: 16rpx;
        padding-right: 24rpx;
        box-sizing: border-box;
        align-items: center;

        .left {
          display: flex;
          align-items: center;

          image {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }

          text {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #404759;
          }
        }

        .right {
          width: 127rpx;
          height: 43rpx;
          background: #ffffff;
          border-radius: 12rpx;
          line-height: 43rpx;
          text-align: center;
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #176bd8;
        }
      }
    }

    .item_ {
      padding: 29rpx 25rpx;
      box-sizing: border-box;
      width: 750rpx;
      display: flex;

      .left_ {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 22rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right_ {
        .one {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2a2a2a;
        }

        .two {
          margin-top: 3rpx;
          font-size: 23rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #707070;
        }

        .three {
          margin-top: 3rpx;
          font-size: 25rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #585e6e;

          text {
            color: #fb4566;
          }
        }

        .four {
          margin-top: 3rpx;
          font-size: 20rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #b8b8b8;
        }

        .five {
          margin-top: 2rpx;
          font-size: 20rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #707070;
        }

        .six {
          margin-top: 4rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #707070;
        }
      }
    }
  }

  .xian_ {
    background-color: #f8f8f8;
    height: 16rpx;
    width: 750rpx;
  }

  .xian1 {
    height: 12rpx;
  }

  .top_ {
    background-color: #fff;
    height: 100rpx;
    display: flex;
    width: 750rpx;
    justify-content: space-between;
    align-items: center;
    padding: 0 25rpx;
    box-sizing: border-box;

    .left_ {
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .right_ {
      width: 38rpx;
      height: 34rpx;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
